<template>
  <div class="calendar-room">
    <div class="calendar-title" style="height:auto;">
        <span style="background:#ffc4b8"></span>脏房
        <span style="border:1px solid #dadada "></span>净房
        <span style="background:#e4e4e4 "></span>无需处理
        <div style="padding:0 20px;">
          <a v-for="m in orderCount" @click="changeRoomType(m)" class="order-a" :class="{'order-check':m.check}">{{m.name}}{{m.count}}</a>
          <el-switch
            v-model="searchData.IsRuleShow"
            @change="initRoom"
            active-text="规则显示">
          </el-switch>
          <span style="margin:0 5px">楼号：</span>
          <el-select v-model="searchData.ZoneId" placeholder="请选择楼号" size="mini" @change="getZoneFloor">
    				<el-option :label="'全部'" :value="0"></el-option>
            <el-option
							v-for="m in ZoneList"
							:label="m.Name"
							:value="m.Id"
							:key="m.Id">
						</el-option>
    			</el-select>
          <span style="margin:0 5px">楼层：</span>
          <el-select v-model="searchData.FloorId" placeholder="请选择楼层" size="mini" @change="initRoom">
    				<el-option :label="'全部'" :value="0"></el-option>
            <el-option
              v-for="m in ZoneFloorList"
              :label="m.FloorNo+'楼'"
              :value="m.Id"
              :key="m.Id">
            </el-option>
    			</el-select>
          <span style="margin:0 5px">房型：</span>
          <el-select v-model="searchData.RoomCategoryId" placeholder="请选择房型" size="mini" @change="initRoom">
    				<el-option :label="'全部'" :value="0"></el-option>
            <el-option
							v-for="m in RoomCategoryList"
							:label="m.Name"
							:value="m.Id"
							:key="m.Id">
						</el-option>
    			</el-select>
        </div>
    </div>
    <div class="calendar-body" style="top: 161px;" :class="{'pd60':!searchData.IsRuleShow}">
      <div class="calendar-leftHeader" v-if="searchData.IsRuleShow">
        <div class="calendar-category" v-for="m in roomList">
          <div class="calendar-category-name">
            <span class="calendar-category-name-text">{{!m.ZoneName?'未分配':m.ZoneName}}</span>
          </div>
          <div class="calendar-category-list">
            <div v-for="(n,index) in m.FloorList" class="calendar-category-room">
              <span>{{!n.FloorNo?'未分配':n.FloorNo+'楼'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="calendar-status-list" v-if="searchData.IsRuleShow"  v-scroll="onscroll">
        <table class="calendar-status-table" style="width:auto">
          <tbody>
              <tr class="calendar-status-row" v-for="(m,mindex) in roomListFloor">
                <td class="calendar-status" v-for="(i,index) in m.RoomList" @mouseover.stop="GetOrderList(i,mindex,index)" @mouseout.stop="showOrder=false">
                  <div style="text-align:center" class="list-div" :class="{unClean:i.RoomStatus===1,isClean:i.RoomStatus===2,Clean:i.RoomStatus===3,'actived':showCardList.some(val=>{return val.RoomId===i.RoomId})}"
                  @click="toggleClass(i)">
                    {{i.RoomNo}}
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===0">预</span>
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===1">入</span>
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===2">入</span>
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===3">退</span>
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===4">退</span>
                    <span class="HotelOrderStatus" v-if="i.HotelOrderStatus===5">取</span>
                    <span class="HotelOrderCleaner" v-if="i.IsHasCleaner">扫</span>
                  </div>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
      <div class="order-div" ref="orderDiv" v-if="searchData.IsRuleShow" style="top:-85px;left:95px;" v-show="showOrder" @mouseover.stop="showOrder=true" @mouseout.stop="showOrder=false">
        <p>房型：{{orderList.RoomCategoryName}}</p>
        <p>客户姓名：{{orderList.ContactName}}</p>
        <p>入离时间：{{!orderList.CheckInDate?'':orderList.CheckInDate.split('T')[0].slice(5,10)}}至{{!orderList.CheckOutDate?'':orderList.CheckOutDate.split('T')[0].slice(5,10)}}</p>
      </div>
      <div class="calendar-list" v-else>
        <div class="list-div" v-for="m in roomList" :key="m.RoomId" :class="{unClean:m.RoomStatus===1,isClean:m.RoomStatus===2,Clean:m.RoomStatus===3,'actived':showCardList.some(val=>{return val.RoomId===m.RoomId})}"
        @click="toggleClass(m)" @mouseover="GetOrderDetail(m)">
          {{m.RoomNo}}
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===0">预</span>
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===1">住</span>
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===2">住</span>
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===3">退</span>
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===4">退</span>
          <span class="HotelOrderStatus" v-if="m.HotelOrderStatus===5">取</span>
          <span class="HotelOrderCleaner" v-if="m.IsHasCleaner">扫</span>
          <div class="order-div" v-if="!!m.OrderSerialid">
            <p>房型：{{m.RoomCategoryName}}</p>
            <p>客户姓名：{{m.ContactName}}</p>
            <p>入离时间：{{!m.CheckInDate?'':m.CheckInDate.split('T')[0].slice(5,10)}}至{{!m.CheckOutDate?'':m.CheckOutDate.split('T')[0].slice(5,10)}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="shopcart" v-if="this.showCardList.length>0">
      <p class="shopcart-count">已选择{{this.showCardList.length}}个房间</p>
       <div class="shopcart-rooms">
         <div v-if="showCardList.some(val=>{return val.RoomStatus===1})" style="color:#d46f6fb8">脏房：</div>
         <div class="shopcart-room" v-for="m in showCardList" v-if="m.RoomStatus===1">{{m.RoomCategoryName}}-{{m.RoomNo}}</div>
         <div v-if="showCardList.some(val=>{return val.RoomStatus!==1})" style="color:#399be6">净房：</div>
         <div class="shopcart-room" v-for="m in showCardList" v-if="m.RoomStatus!==1">{{m.RoomCategoryName}}-{{m.RoomNo}}</div>
       </div>
       <div class="shopcart-action">
         <el-button type="warning" plain v-if="showCardList.some(val=>{return val.RoomStatus!==1})" @click="changeDirty(false)" data-auth="store_room_dirty">置为脏房</el-button>
         <el-button type="success" plain v-if="showCardList.some(val=>{return val.RoomStatus===1})" @click="changeDirty(true)" data-auth="store_room_clean">置为净房</el-button>
         <el-button type="danger" plain v-if="showCardList.some(val=>{return val.RoomStatus===1})" @click="showClean" data-auth="store_room_cleaner">分配打扫</el-button>
      </div>
    </div>

    <el-dialog
      :title="'分配打扫'"
      :visible.sync="cleanShow"
      width="550px"
      class="delete-dialog"
      center>
      <el-form :model="cleanData" :rules="cleanrules" ref="cleanForm" label-width="85px">
        <el-form-item label="清洁人员:" prop="CleanerList">
          <el-select v-model="cleanData.CleanerList" multiple filterable placeholder="请选择人员">
             <el-option
               v-for="m in CleanerList"
               :label="m.Name"
               :value="m.Id"
               :key="m.Id">
             </el-option>
           </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveClean">保存</el-button>
        <el-button @click="cleanShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      let _this=this;
      return {
        showOrder:false,
        orderList:{},
        cleanShow:false,
        cleanData:{
          RoomIds:[],
          CleanerList:[]
        },
        cleanrules:{
          CleanerList: [
            { required: true,type:'array', message: '请选择清洁人员',  trigger: 'change' }
          ]
        },
        CleanerList:[],
        roomList:[],
        showCardList:[],
        searchData:{
          RoomStatus:0,
          RoomType:'',
          ZoneId:0,
          FloorId:0,
          RoomCategoryId:0,
          IsRuleShow:true
        },
        loading:false,
        weekday:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        orderCount:{
          All:{count:'',name:'全部',check:true,type:''},
          Dirty:{count:0,name:'脏房',check:false,type:'Dirty'},
          ContinuteLive:{count:0,name:'续住',check:false,type:'ContinuteLive'},
          CheckIn:{count:0,name:'今日入住',check:false,type:'CheckIn'},
          CheckOut:{count:0,name:'今日离店',check:false,type:'CheckOut'},
          YesterdayCheckIn:{count:0,name:'明日入住',check:false,type:'YesterdayCheckIn'},
          YesterdayCheckOut:{count:0,name:'明日退房',check:false,type:'YesterdayCheckOut'}
        },
        roomRowData:[],
        roomListFloor:[],
        RoomCategoryList:[],
        ZoneList:[],
        ZoneFloorList:[]
      }
    },
    computed:{
    },
    methods: {
      changeRoomType(m){
        Object.keys(this.orderCount).forEach(k=>{
          this.orderCount[k].check=false;
        })
        m.check=true;
        this.searchData.RoomType=m.type;
        this.initRoom()
      },
      getZoneFloor(){
        if(this.ZoneId===0){
          this.ZoneFloorList=[];
        }else{
          this.$ajax.GetZoneFloorList({zoneId:this.searchData.ZoneId}).then(res=>{
            if(res.Success&&res.Data){
              this.ZoneFloorList=res.Data;
            }}
          )
        }
        this.searchData.FloorId=0;
        this.initRoom();
      },
      initRoom(){
        this.cleanShow=false;
        this.$ajax.GetActualRoomStatus(this.searchData).then(res=>{
          if(res.Success){
            Object.keys(res.Data.StatisticList).forEach(k=>{
              this.orderCount[k].count=res.Data.StatisticList[k];
            })
            this.roomList=res.Data.List;
            if(this.searchData.IsRuleShow){
              this.roomListFloor=[];
              this.roomList.forEach(val=>{
                this.roomListFloor.push(...val.FloorList)
              })
              console.log(this.roomListFloor)
            }
          }
        })
      },
      onscroll(e,position){
        let tabT=this.$el.querySelector(".calendar-leftHeader");
        tabT.scrollTop=position.scrollTop;
      },
      GetOrderList(m,top,left){
        if(!m.OrderSerialid){
          return;
        }
        let div=this.$refs.orderDiv;
        div.style.left=100*left+95+'px';
        div.style.top=70*top-85+'px';
        this.orderList=m;
        this.showOrder=true;
      },
      GetOrderDetail(m){
        if(!m.OrderSerialid)return;
        console.log(m.OrderSerialid);
      },
      toggleClass(m){
        if(this.showCardList.some(val=>{return val.RoomId===m.RoomId})){
          let index=this.showCardList.findIndex(val=>{return val.RoomId===m.RoomId});
          this.showCardList.splice(index,1);
        }else{
          this.showCardList.push(m);
        }
      },
      changeDirty(type){
        let data={
          RoomIds:[],
          IsDirty:!type,
        }
        this.showCardList.forEach(val=>{
          if(type){
            if(val.RoomStatus===1){
              data.RoomIds.push(val.RoomId)
            }
          }else{
            if(val.RoomStatus!==1){
              data.RoomIds.push(val.RoomId)
            }
          }
        })
        this.$ajax.BathSetRoomDC(data).then(res=>{
          if(res.Success){
            this.$message.success(`已置为${type?'净':'脏'}房!`);
            data.RoomIds.forEach(item=>{
              this.showCardList.splice(this.showCardList.findIndex(val=>{return val.RoomId===item}),1)
            })
            this.initRoom();
          }
        })
      },
      showClean(){
        this.resetForm('cleanForm');
        this.showCardList.forEach(val=>{
          if(val.RoomStatus===1){
            this.cleanData.RoomIds.push(val.RoomId)
          }
        })
        this.$ajax.GetHotelCleanerList().then(res=>{
          if(res.Success){
            this.CleanerList=res.Data;
            this.cleanShow=true;
          }
        })
      },
      resetForm(formName) {
        if(!this.$refs[formName]){return};
        this.$refs[formName].resetFields();
      },
      saveClean(){
        this.$refs['cleanForm'].validate((valid) => {
          if (valid) {
            let data={
              CleanerList:[],
              RoomIds:this.cleanData.RoomIds
            }
            this.cleanData.CleanerList.forEach(val=>{
              this.CleanerList.filter(item=>{
                if(val===item.Id){
                  data.CleanerList.push(item)
                }
              })
            })
            this.$ajax.ArrangeRoomClean(data).then(res=>{
              if(res.Success){
                this.$message.success(`已分配人员打扫!`);
                this.showCardList=[];
                this.initRoom();
              }
            })
          }}
        )
      }
    },
    mounted(){
      this.$ajax.GetRoomCategoryList({hotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
        if(res.Success&&res.Data){
          this.RoomCategoryList=res.Data;
        }}
      )
      this.$ajax.GetHotelZoneList().then(res=>{
        if(res.Success&&res.Data){
          this.ZoneList=res.Data;
        }
      })
      this.showCardList=[];
      this.loading=true;
      this.initRoom();
    }
  }
</script>
<style lang="scss">
  .left0{
    left: 0!important;
  }
  .calendar-list{
    width:100%;
    margin-top:2px;
    .list-div{
      position: relative;
      background: white;
      border: solid thin #e6e6e6;
      background-clip: padding-box;
      text-align: center;
      line-height:69px;
      float: left;
    }
  }
  .calendar-list,.calendar-status-list{
    .list-div{
      width: 100px;
      height: 69px;
      line-height: 69px;
      cursor: pointer;
      .order-div{
        display: none;
        position: absolute;
        top: -92px;
        background: #fff;
        color: #666;
        z-index: 99;
        padding:0 20px;
        border:1px solid #dadada;
        border-radius: 15px;
        min-width: 205px;
        top: -85px;
        left: -50%;
        p{
          height: 20px;
          line-height: 20px;
          margin: 10px 0;
          text-align: left;
        }
        &:after,&:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            top: 100%;
            position: absolute;
            width: 0;
        }
        &:after {
            border-width: 10px;
            border-top-color: #dadada;
            left: 43%;
        }
      }
      &:hover{
        .order-div{
          display: block;
        }
      }
    }
    .Clean{
      background: #E4E4E4;
      color:#fff;
    }
    .isClean{
      background: #fff;
      color:#333;
      &:hover{
        border-color:#FFC4B8;
        color:#FFC4B8;
      }
    }
    .unClean{
      background: #FFC4B8;
      color:#fff;
      &:hover{
        background: #FF9d90;
      }
    }
    .actived{
      background: #409EFF;
    }
  }
  .pd60{
    padding: 60px;
  }
  .order-div{
    position: absolute;
    top: -92px;
    background: #fff;
    color: #666;
    z-index: 99;
    padding:0 20px;
    border:1px solid #dadada;
    border-radius: 15px;
    min-width: 205px;
    top: -85px;
    left: -50%;
    p{
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      text-align: left;
    }
    &:after,&:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        top: 100%;
        position: absolute;
        width: 0;
    }
    &:after {
        border-width: 10px;
        border-top-color: #dadada;
        left: 43%;
    }
  }
  .HotelOrderStatus,.HotelOrderCleaner{
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 15px;
    height: 15px;
    font-size: 15px;
    text-align: center;
    line-height: 15px;
    border: 1px solid #21bb3c;
    color: #21bb3c;
    border-radius: 15px;
    padding: 3px;
  }
  .HotelOrderCleaner{
    left: 1px;
    border: 1px solid #ff0101;
    color: #ff0101;
  }
</style>
